import dayjs from 'dayjs'
Page({
  data: {
    currentDate: new Date().getTime(),
    // selectedHouse: '', // 因为传这个空值过去 会被解析成 不传 找不到 还不如 让它自动添加
    selectRepairItemData: {},
    mobile: '',
    // 刚进公司多写注释，变量是什么意思，函数是什么意思。appointment表示 预约日期
    appointment: '',
    // 问题描述的变量
    description: '',
    // 所有附件图片的数组
    attachment: [],
    houseLayerVisible: false,
    repairLayerVisible: false,
    dateLayerVisible: false,
    // houseList: [
    //   { name: '北京西三旗花园1号楼 101' },
    //   { name: '北京东村家园3号楼 302' },
    //   { name: '北京育新花园3号楼 703' },
    //   { name: '北京天通苑北苑8号楼 403' },
    // ],
    // repairItem: [{ name: '水路卫浴' }, { name: '电路灯具' }, { name: '管道疏通' }, { name: '开锁换锁' }],
    houseList: [],
    repairItem: [],
    // fileList: [
    //   { url: '/repair_pkg/static/uploads/attachment.jpg' },
    //   { url: '/repair_pkg/static/uploads/attachment.jpg' },
    // ],
  },
  // onLoad() {
  //   // 在这个页面里面获取用户的登录状态
  //   console.log('填写报修信息', getApp().token);
  //   if (!getApp().token) {
  //     wx.redirectTo({
  //       url: '/path/login',
  //     })
  //   }
  // },
  async onLoad({ id }) {
    this.getRepaireHouse()
    this.getRepaireItem()

    if (id) {
      // 编辑的if分支
      wx.setNavigationBarTitle({
        title: '修改报修信息'
      })
      const { code, data: repairDetail } = await wx.$http.get('/repair/' + id)
      if (code !== 10000) return wx.$utils.toast('获取报修详情失败')

      this.setData({
        ...repairDetail,
        selectRepairItemData: {
          id: repairDetail.repairItemId,
          name: repairDetail.repairItemName
        },
        selectedHouse: {
          id: repairDetail.houseId,
          name: repairDetail.houseInfo
        }
      })
    }
  },
  // 提交报修的请求
  async goList() {
    // 发请求之前先要校验。 （前端校验是不保险，后端会和前端一模一样也做一个校验）
    // 因为前后端在测试接口的时候，并不需要浏览器或者小程序，直接用工具 postman测试
    const res = await wx.$http.post('/repair', {
      id: this.data.id,
      "houseId": this.data.selectedHouse?.id,
      "repairItemId": this.data.selectRepairItemData?.id,
      mobile: this.data.mobile,
      "appointment": this.data.appointment,
      "description": this.data.description,
      "attachment": this.data.attachment
    })
    console.log(res);
    if (res.code !== 10000) return wx.$utils.toast('新增报修请求失败，请重试')
    wx.reLaunch({
      url: '/repair_pkg/pages/list/index',
    })
  },
  async getRepaireHouse() {
    // 这个原本的接口是 /house 因为返回的内容是 空数组，我们不能用，所以临时借用/room的数据来写
    // 工作里面这种情况就要和后端去对接，去问他 /house 接口的情况
    const res = await wx.$http.get('/room')
    if (res.code !== 10000) return wx.$utils.toast('获取能报修的请求失败')
    console.log(res);
    // 这个接口的返回值是有问题的，我们上课就是用houseList的假数据去用，工作里面下面这句话还是要加
    // JS里面的 面板选择回调办法
    // this.setData({
    //   houseList: res.data
    // })

    // 加工后端的数据，减少setData的负担，优化代码
    const tmpArr = res.data.map(item => ({
      id: item.id,
      name: item.point + item.building + '号楼' + item.room
    }))
    this.setData({
      houseList: tmpArr
    })
  },
  async getRepaireItem() {
    const res = await wx.$http.get('/repairItem')
    if (res.code !== 10000) return wx.$utils.toast('获取能报修的项目请求失败')
    console.log(res);
    // 这个接口的返回值是有问题的，我们上课就是用houseList的假数据去用，工作里面下面这句话还是要加
    this.setData({
      repairItem: res.data
    })
  },
  // 选择房屋
  selectedHouse(e) {
    console.log(e);
    // console.log(e.detail.name);
    console.log(e.detail);
    this.setData({
      // selectedHouse: e.detail.name
      selectedHouse: e.detail
    })
  },
  // 选择维修项目
  selectRepairItem(e) {
    console.log(e);
    this.setData({
      selectRepairItemData: e.detail
    })
  },
  // 选择确定的时间
  datetimeConfirm(e) {
    this.setData({
      // appointment: e.detail
      // 关于时间有两个变量， currentDate给组件显示时间用的
      // appointment 给后端，以及页面展示用的，是一个用户可以读懂的字符串，时间戳读不懂
      // 怎么样吧时间戳转换为 可读的格式
      currentDate: e.detail,
      // 小程序里面不要使用momentjs 500KB+  dayjs 2KB
      appointment: dayjs(e.detail).format('YYYY-MM-DD') // 使用时间戳转换2023-4-10的 dayjs包--npm i dayjs
    })
    this.closeDateLayer()
  },
  // 附件图片上传
  afterFileSelect(e) {
    wx.uploadFile({
      url: wx.$http.baseURL + '/upload',
      filePath: e.detail.file.url,
      name: 'file',
      header: {
        Authorization: getApp().token
      },
      success: (res) => {
        const tmp = JSON.parse(res.data)
        // 下面这一行，是吧js里面的 attachment 值修改了
        this.data.attachment.push(tmp.data)
        // 下面这句话是 让 wxml 和 js 通信，数据响应式的一个语句
        this.setData({
          attachment: this.data.attachment
        })
      }
    })
  },
  openHouseLayer() {
    this.setData({ houseLayerVisible: true })
  },
  closeHouseLayer() {
    this.setData({ houseLayerVisible: false })
  },
  openRepairLayer() {
    this.setData({ repairLayerVisible: true })
  },
  closeRepairLayer() {
    this.setData({
      repairLayerVisible: false,
    })
  },

  openDateLayer() {
    this.setData({ dateLayerVisible: true })
  },
  closeDateLayer() {
    this.setData({ dateLayerVisible: false })
  }
})
